/*
* CSSTwo
* A barebones 2D CSS drawing implementation
*
* Ken Frederick
* frederickk@google.com
*
*/


var CSSTwo = function(container) {
    // ------------------------------------------------------------------------
    //
    // Properties
    //
    // ------------------------------------------------------------------------
    container = container || document.body;



    // ------------------------------------------------------------------------
    //
    // Methods
    //
    // ------------------------------------------------------------------------
    /**
     * Line
     *
     * @param  {Number} x1
     * @param  {Number} y1
     * @param  {Number} x2
     * @param  {Number} y2
     * @param  {Array}  parameters
     *
     * @return {Array}
     */
    function line(x1, y1, x2, y2, parameters) {
        var properties = combine({
            id          : Math.random().toString(36).slice(2),
            borderStyle : 'solid',
            borderWidth : '1px',
            borderColor : '#000'
        }, parameters);

        var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
        var angle  = Math.atan2(y2 - y1, x2 - x1); // * 180 / Math.PI;

        var line = document.createElement('div');
        line.className = 'line';
        line.id = properties.id;

        line.style.position = 'absolute';
        line.style.width = length + 'px';
        line.style.top = y1 + 0.5*length*Math.sin(angle) + 'px';
        line.style.left = x1 - 0.5*length*(1-Math.cos(angle)) + 'px';
        line.style.webkitTransform = line.style.MozTransform = line.style.OTransform = line.style.transform = 'rotate(' + angle + 'rad)';

        // makes only text unselectable?
        line.style.webkitUserSelect = 'none';
        line.style.mozUserSelect = 'none';
        line.style.msUserSelect = 'none';
        line.style.oUserSelect = 'none';
        line.style.userSelect = 'none';

        for (var key in properties) {
            line.style[key] = properties[key];
        }

        container.appendChild(line);

        return line;
    };


    /**
     * Rectangle
     *
     * @param  {Number} x
     * @param  {Number} y
     * @param  {Number} w          width
     * @param  {Number} h          height
     * @param  {Array}  parameters
     *
     * @return {Array}
     */
    function rect(x, y, w, h, parameters) {
        var properties = combine({
            id              : Math.random().toString(36).slice(2),
            color           : '#000',
            // backgroundColor : '#eee',
            content         : ''
        }, parameters);

        var rect = document.createElement('div');
        rect.className = 'rect';
        rect.id = properties.id;

        rect.style.position = 'absolute';
        rect.style.top = y + 'px';
        rect.style.left = x + 'px';
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';

        // makes only text unselectable?
        rect.style.webkitUserSelect = 'none';
        rect.style.mozUserSelect = 'none';
        rect.style.msUserSelect = 'none';
        rect.style.oUserSelect = 'none';
        rect.style.userSelect = 'none';

        for (var key in properties) {
            rect.style[key] = properties[key];
        }
        rect.innerHTML += properties.content;

        container.appendChild(rect);

        return rect;
    };


    /**
     * Ellipse
     *
     * @param  {Number} x
     * @param  {Number} y
     * @param  {Number} w          width
     * @param  {Number} h          height
     * @param  {Array}  parameters
     *
     * @return {Array}
     */
    function ellipse(x, y, w, h, parameters) {
        var properties = combine({
            id              : Math.random().toString(36).slice(2),
            color           : '#000',
            backgroundColor : '#eee',
            content         : ''
        }, parameters);

        var ellipse = document.createElement('div');
        ellipse.className = 'ellipse';
        ellipse.id = properties.id;

        ellipse.style.position = 'absolute';
        ellipse.style.top = y-(h/2) + 'px';
        ellipse.style.left = x-(w/2) + 'px';
        ellipse.style.width = w + 'px';
        ellipse.style.height = h + 'px';
        ellipse.style.webkitBorderRadius = ellipse.style.MozBorderRadius = ellipse.style.webkitBorderRadius = (w/2) + 'px / ' + (h/2) + 'px';

        for (var key in properties) {
            ellipse.style[key] = properties[key];
        }
        ellipse.innerHTML += properties.content;

        container.appendChild(ellipse);

        return ellipse;
    };

    /**
     * Circle
     *
     * @param  {Number} x
     * @param  {Number} y
     * @param  {Number} r          radius
     * @param  {Array}  parameters
     *
     * @return {Array}
     */
    function circle(x, y, r, parameters) {
        return ellipse(x, y, r, r, parameters);
    };

    /**
     * Text
     *
     * @param  {Number} x
     * @param  {Number} y
     * @param  {String} str
     * @param  {Array}  parameters
     *
     * @return {Array}
     */
    function text(x, y, str, parameters) {
        var properties = combine({
            id : Math.random().toString(36).slice(2)
        }, parameters);

        var text = document.createElement('div');
        text.className = 'text';
        text.id = properties.id;

        text.style.position = 'absolute';
        text.style.top = y + 'px';
        text.style.left = x + 'px';
        text.color = '#000';

        // makes only text unselectable?
        text.style.webkitUserSelect = 'none';
        text.style.mozUserSelect = 'none';
        text.style.msUserSelect = 'none';
        text.style.oUserSelect = 'none';
        text.style.userSelect = 'none';

        for (var key in properties) {
            text.style[key] = properties[key];
        }

        text.innerHTML += str;

        container.appendChild(text);

        return text;
    };


    // ------------------------------------------------------------------------
    function combine(base, arr) {
        for (var item in base) {
            arr[item] = (arr[item] !== undefined)
                ? arr[item]
                : base[item];
        }
        return arr;
    };


    // ------------------------------------------------------------------------
    return {
        line    : line,
        rect    : rect,
        ellipse : ellipse,
        circle  : circle,
        text    : text
    };

};